<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传我的Clover</title>
    <link rel="stylesheet" href="/public/bootcss/css/bootstrap.min.css" crossorigin="anonymous">
    <script src="/public/bootcss/js/jquery.slim.min.js" crossorigin="anonymous"></script>
    <script src="/public/bootcss/js/popper.min.js" crossorigin="anonymous"></script>
    <script src="/public/bootcss/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="/public/jquery/jquery-3.3.1.min.js"></script>
</head>

<body>

    <div class="container">
        <div style="position:fixed; top:0;left:0; width:100%; ">
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link active" href="/">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://mmqogy.cn">个人博客</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="modal" data-target="#Sponsorship" href="#">赞助我</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="modal" data-target="#exampleModalCenter" href="#">百度云账号共享</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="modal" data-target="#Contact" href="#">联系我</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{:url('help/index/index')}">疑难解答</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{:url('upload/index/index')}">投递我的clover</a>
                </li>
            </ul>
        </div>
        <br>
        <br>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">上传文件</span>
            </div>
            <div class="custom-file">
                <form method="post" enctype="multipart/form-data">
                    <input style="width: 100%;" name="file" type="file"
                        accept=".zip,.rar,.7z,.tar,.gzip,.gz,.bz2,.xz,.lz" class="custom-file-input"
                        id="inputGroupFile01">
                    <label class="custom-file-label" id='temp_name' for="inputGroupFile01">点我选择文件</label>
                </form>
            </div>
        </div>
        <progress value="0" max="100" style="width: 100%;"></progress>
        <p style="float: left;" id="progress">0 bytes</p>
        <p style="float: right;" id="info"></p>
        <br />
        <input type="button" value="上传文件" onclick="upload()" />
        <br /><br />
        上传进度：<br />


        <div class="input-group mb-3">
            <input id='mail' type="text" class="form-control" placeholder="请输入您的邮箱" aria-label="请输入您的邮箱"
                aria-describedby="basic-addon2">
            <div class="input-group-append">
                <select id='mail_type' class="custom-select" id="basic-addon2">
                    <option value="@QQ.com">@QQ.com</option>
                    <option value="@Gmail.com">@Gmail.com</option>
                    <option value="@163.com">@163.com</option>
                    <option value="@139.com">@139.com</option>
                    <option value="@sina.com">@sina.com</option>
                    <option value="undefined">其他请输入完整的邮箱</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="情简介下您的clover 好让别人理解"
                aria-label="情简介下您的clover 好让别人理解"></textarea>
        </div>
        <button type="button" onclick="post()" class="btn btn-primary btn-lg btn-block">保存</button>
    </div>
    <script>
        var totalSize = 0;
        //绑定所有type=file的元素的onchange事件的处理函数  
        $(':file').change(function () {
            var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了  
            name = file.name;
            size = file.size;
            type = file.type;
            url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片  
            $(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + (size / 1024 / 1024).toFixed(2) + 'MB' /* + " url: " + url */);
            totalSize += size;
            $("#info").html("总大小: " + totalSize + "bytes");
        });
        function upload() {
            //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");  
            var formData = new FormData($('form')[0]);
            if ($("#inputGroupFile01").val()) {


                //ajax异步上传  
                $.ajax({
                    url: "{:url('upload/index/upload')}",
                    type: "POST",
                    data: formData,
                    xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数  
                        myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) { //检查upload属性是否存在  
                            //绑定progress事件的回调函数  
                            myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                        }
                        return myXhr; //xhr对象返回给jQuery使用  
                    },
                    success: function (result) {
                        if (result.code) {
                            $('#temp_name').val(result.msg);
                            alert('上传成功');
                        } else {
                            alert(result.msg);
                        }
                    },
                    contentType: false, //必须false才会自动加上正确的Content-Type  
                    processData: false  //必须false才会避开jQuery对 formdata 的默认处理  
                });
            } else {
                alert('您没有选择文件')
            }
        }
        //上传进度回调函数：  
        function progressHandlingFunction(e) {
            if (e.lengthComputable) {
                $('progress').attr({ value: e.loaded, max: e.total }); //更新数据到进度条  
                var percent = e.loaded / e.total * 100;
                $('#progress').html(e.loaded + "/" + e.total + " bytes. " + percent.toFixed(2) + "%");
            }
        }
        function post() {
            $.ajax({
                type: "POST",
                url: "{:url('upload/index/sond')}",
                data: {
                    file_name: $('#temp_name').val(),
                    email: $('#mail').val(),
                    email_type: $('#mail_type').val(),
                    info: $('#exampleFormControlTextarea1').val(),
                },
                dataType: "JSON",
                success: function (response) {
                    alert(response.msg);
                }
            });
        }
    </script>
    <!-- 弹出层 百度云的 -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">⚠️警告</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    请勿存储违法违规东西
                    <br>
                    百度云微博登陆
                    17100621941 密码 dh86527
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 弹出层 -->
    <!-- 弹出层 赞助的 -->
    <div class="modal fade" id="Sponsorship" tabindex="-1" role="dialog" aria-labelledby="SponsorshipTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">支付宝&微信&QQ</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body" style="float:left">
                    <img style="width: 100%;" src="https://ws3.sinaimg.cn/large/006wvbvUly1g1xjx8e0bsj31jk0ik7jf.jpg"
                        alt="" srcset="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 弹出层 -->
    <!-- 弹出层 联系我 -->
    <div class="modal fade" id="Contact" tabindex="-1" role="dialog" aria-labelledby="ContactTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">欢迎各位入群</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img style="width: 100%;" src="https://wx2.sinaimg.cn/large/006wvbvUly1g1xk6mz6udj30f00kkgmq.jpg"
                        alt="" srcset="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 弹出层 -->
</body>

</html>